<!DOCTYPE html> 
<html>
	<head>
		<title>PixelBox</title>

<script src="jquery.js"></script>
<script src="PixelBox.js"></script>
<link rel="stylesheet" href="PixelBox.css" type="text/css" media="screen" />
<style>
                body{
			background:whitesmoke;
		}
		#wrapper {
			width:600px; 
			margin:0 auto; 
			border-radius:0 0 5px 5px;
			-moz-border-radius:0 0 5px 5px;
			-webkit-border-radius: 0 0 5px 5px;
			background:#fff; 
			border:1px solid #ccc; 
			padding:25px; 
			border-top:none; 
			box-shadow:0 0 5px #ccc;
			-moz-box-shadow:0 0 5px #ccc;
			-webkit-box-shadow:0 0 5px #ccc;
			text-align:left;
		}
		#wrapper blockquote {
			width:500px; 
                        background-color: whitesmoke;
			margin:0 auto; 
			border:1px solid #ccc; 
			padding:25px; 
			border-top:none; 
			box-shadow:0 0 5px #ccc;
			-moz-box-shadow:0 0 5px #ccc;
			-webkit-box-shadow:0 0 5px #ccc;
}

		#footer {
			width:600px; 
			margin:0 auto; 
			border-radius:0 0 5px 5px;
			-moz-border-radius:0 0 5px 5px;
			-webkit-border-radius: 0 0 5px 5px;
			background:#fff; 
			border:1px solid #ccc; 
			padding:25px; 
			border-top:none; 
			box-shadow:0 0 5px #ccc;
			-moz-box-shadow:0 0 5px #ccc;
			-webkit-box-shadow:0 0 5px #ccc;
			text-align:center;
		}
</style>
	</head>
<body>

<div id="wrapper">
	<h1>PixelBox - Version 1.0</h1>
<iframe src="https://www.facebook.com/plugins/like.php?href=https://facebook.com/WidCraft"
        scrolling="no" frameborder="0"
        style="border:none; width:470px; height:60px"></iframe>
</div>
<div id="wrapper">
	<h2><b>Demo :</b></h2>
		<ul style="list-style:none;margin:0;">
			<li style="float: left;">
				<a href="Content/1.jpg" height="90%" class="pixelbox_trigger">
				<img src="Content/1.jpg" border="1px" width="100px" height="100px"/>
				</a>
			</li>
			<li style="float: left;">
				<a href="Content/2.jpg" class="pixelbox_trigger">
				<img src="Content/2.jpg" border="1px"  width="100px" height="100px"/>
				</a>
			</li>	
			<li style="float: left;">
				<a href="Content/3.jpg" class="pixelbox_trigger">
				<img src="Content/3.jpg" border="1px"  width="100px" height="100px"/>
				</a>
			</li>	
			<li style="float: left;">
				<a href="Content/4.jpg" height="90%" class="pixelbox_trigger">
				<img src="Content/4.jpg" border="1px"  width="100px" height="100px"/>
				</a>
			</li>	
			<li>
				<a href="Content/5.jpg" height="90%" class="pixelbox_trigger">
				<img src="Content/5.jpg" border="1px"  width="100px" height="100px"/>
				</a>
			</li>	
		</ul>
<hr/>
	<h2><b>Installing :</b></h2>
Add JS and CSS files in your document :<br/><br/>
<blockquote>&lt;script src="jquery.js" type="text/javascript" &gt; &lt;/script&gt;
<br/>
&lt;script src="PixelBox.js" type="text/javascript" &gt; &lt;/script&gt;
<br/>
&lt;link rel="stylesheet" href="PixelBox.css" type="text/css" media="screen" /&gt;
</blockquote>
<hr/>
	<h2><b>Adding :</b></h2>
Add <b>class="pixelbox_trigger"</b> in your document like this :<br/><br/>
<blockquote>&lt;a href="ImageURL" <b> class="pixelbox_trigger" </b>&gt; &lt;img src="ImageURL" width="100px" height="100px"/&gt; &lt;/a&gt;</blockquote>
<br/>Just after class you can also add width="" height ="" tag to set width and height of your pop-up.
</div> <!-- #/wrapper -->
<footer id="footer">
<h3>Created By - <a style="color:black;text-decoration:none;" onclick="target='_blank';" href="http://twitter.com/HardeepAsrani"> Hardeep Asrani </a> | &#0169;2012 All Right Reserved.</h3>
</footer>
</body>
</html>